<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理端列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/comm/list.css" media="all">

    <script type="application/javascript" src="/static/js/jQuery.js"></script>
    <script type="application/javascript" src="/static/layui/layui.js"></script>
    <script type="application/javascript" src="/static/js/login.js"></script>
    <script type="application/javascript" src="/static/js/utils.js"></script>
    <script type="application/javascript" src="/static/js/comm/list.js" th:inline="none"></script>
    <script type="application/javascript" th:inline="none">

        $(function(){
            var userName = getCookie("userName");
            $("#currentUserName").text(userName);

        });

        layui.use(["table","form","laydate"], function () {
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;

            var workingTable = table.render({
                elem: '#adminWorkingList'
                ,url: '/adminRest/list' //数据接口
                ,page: true //开启分页
                ,defaultToolbar:['filter']
                ,toolbar: "#toolbar"
                ,cols: [[
                    {type:'checkbox'}
                    ,{field: 'id', title: 'ID', hide:true}
                    ,{field: 'userName', title: '用户名'}
                    ,{field: 'plan', title: '计划事项'}
                    ,{field: 'planTime', title: '制定时间', sort: true, templet:function(d){
                            return formatDate(d.planTime);
                        }}
                    ,{field: 'done', title: '是否完成', templet:function(d){
                            return d.done === true ? "已完成" : "未完成";
                        }}
                    ,{field: 'doneTime', title: '完成时间', sort: true, templet:function (d) {
                            return formatDate(d.doneTime);
                        }}
                    ,{field: 'context', title: '实际情况说明'}
                    ,{field: '', title: '操作', toolbar: '#rowsbar'}
                ]]
                ,done: function(res){

                    console.debug(res);
                    var _html = '<option value="">全部</option>';
                    var sel = $("#userId");
                    var userId = res.queryDto.userId;//获取查询返回的查询条件 -- 用户id

                    $.get("/adminRest/listUser",function(data){
                        if(data.code === 0){
                            var v = data.data;
                            for (var i = 0; i < v.length; i++) {
                                if(userId == v[i].id){
                                    _html += '<option selected value="'+v[i].id+'">'+v[i].userName+'</option>';
                                }else{
                                    _html += '<option value="'+v[i].id+'">'+v[i].userName+'</option>';
                                }

                            }
                            sel.html(_html);
                            form.render('select');
                        }
                    });
                }
            });

            //头部工具栏监听
            table.on('toolbar(adminWorking)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'addData':
                        layer.open({
                            title: false,
                            type: 2,
                            area: ['81%',"90%"],
                            content: ["/admin/edit"]
                        });
                        break;
                    case 'exportQuery':
                        //导出当前筛选
                        location.href = "/adminRest/exportExcel?query=export&"+$("#queryForm").serialize();
                        break;
                    case 'exportSelect':
                        var data = checkStatus.data;
                        var ids = "";
                        if(data.length > 0){
                            for (var i = 0; i < data.length; i++) {
                                ids += data[i].id + ",";
                            }
                            location.href = "/adminRest/exportExcel?query=" + ids;
                        } else {
                            layer.msg("未选中");
                        }
                        break;
                }
            });

            //监听行工具事件
            table.on('tool(adminWorking)', function(obj){
                var data = obj.data;
                //console.log(obj)
                switch(obj.event){
                    case 'detail' :
                        layer.open({
                            title: false,
                            type: 2,
                            area: ['60%',"70%"],
                            content : "/admin/detail?id="+data.id,
                            cancel: function(index, layero){
                                table.reload('adminWorkingList', {
                                    url: '/adminRest/list'
                                    ,where: {
                                        query : "query"
                                        ,userId : $("#userId").val()
                                        ,planTimeHorizon : $("#planTimeHorizon").val()
                                        ,doneTimeHorizon : $("#doneTimeHorizon").val()
                                    } //设定异步数据接口的额外参数
                                    //,height: 300
                                });
                            }
                        });
                        break;
                }
            });

            //监听提交
            form.on('submit(querySubmit)', function(data){

                table.reload('adminWorkingList', {
                    url: '/adminRest/list'
                    ,where: {
                        query : "query"
                        ,userId : $("#userId").val()
                        ,planTimeHorizon : $("#planTimeHorizon").val()
                        ,doneTimeHorizon : $("#doneTimeHorizon").val()
                    } //设定异步数据接口的额外参数
                    //,height: 300
                });

                return false;//阻值表单跳转
            });

            //时间筛选
            laydate.render({
                elem: '#planTimeHorizon'
                ,type: 'datetime'
                ,range: '~'
                ,format: 'yyyy-MM-dd HH:mm:ss'
            });
            laydate.render({
                elem: '#doneTimeHorizon'
                ,type: 'datetime'
                ,range: '~'
                ,format: 'yyyy-MM-dd HH:mm:ss'
            });
        })
    </script>
</head>
<body>
    <script type="text/html" id="toolbar">
            <button class="layui-btn layui-btn-sm" lay-event="addData">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="exportQuery">导出当前</button>
            <button class="layui-btn layui-btn-sm" lay-event="exportSelect">导出选中</button>
    </script>
    <script type="text/html" id="rowsbar">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    </script>
    <div class="listBody">
        <div class="listTile">
            <div class="welcome">
                欢迎使用管理端
            </div>
            <div class="loginUser">
                当前登录:<span id="currentUserName"></span>
            </div>
        </div>
        <div class="listContext">
            <div class="">
                <form class="layui-form" id="queryForm">
                    <div class="layui-input-inline" >
                        <select name="userId" id="userId" lay-filter="selectUser" ></select>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">计划时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="planTimeHorizon" name="planTimeHorizon" placeholder="开始 到 结束">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">完成时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="doneTimeHorizon" name="doneTimeHorizon" placeholder="开始 到 结束">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline">
                            <button class="layui-btn" lay-submit lay-filter="querySubmit">搜索</button>
                        </div>
                    </div>
                </form>
            </div>

            <table id="adminWorkingList" lay-filter="adminWorking" lay-data="{id: 'adminWorkingTableId'}"></table>
        </div>
    </div>


</body>
</html>